<script>
import { useUserInfoStore } from '@/stores/user';
import { ref, computed, watch } from 'vue';
import * as echarts from 'echarts';

export default {
  data() {
    return {
      myuser: useUserInfoStore(),
      tableData: [
        {
          "id": "001",
          "project": "Road Project A",
          "overtime": true,
          "hours": 3.5,
          "created_at": "2024-04-10 10:30"
        },
        {
          "id": "002",
          "project": "Bridge Maintenance B",
          "overtime": false,
          "hours": 2,
          "created_at": "2024-04-09 13:00"
        },
        {
          "id": "003",
          "project": "Pipeline Fix C",
          "overtime": true,
          "hours": 4.5,
          "created_at": "2024-04-08 08:00"
        },
        {
          "id": "004",
          "project": "Bridge Maintenance B",
          "overtime": true,
          "hours": 3,
          "created_at": "2024-04-07 16:45"
        },
        {
          "id": "005",
          "project": "Tunnel Cleaning D",
          "overtime": false,
          "hours": 8.1,
          "created_at": "2024-04-03 11:43"
        }
      ]
    }
  },
  mounted() {
    this.initChart();
  },
  computed: {
    projectHoursData() {
      const projectMap = {};
      
      this.tableData.forEach(item => {
        if (projectMap[item.project]) {
          projectMap[item.project] += item.hours;
        } else {
          projectMap[item.project] = item.hours;
        }
      });
      
      return Object.keys(projectMap).map(project => ({
        name: project,
        hours: projectMap[project]
      }));
    }
  },
  watch: {
    tableData: {
      handler() {
        this.updateChart();
      },
      deep: true
    }
  },
  methods: {
    logoutClick() {
      this.$router.push('/')
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.updateChart();
    },
    updateChart() {
      if (!this.chart) return;
      
      const option = {
        title: {
          text: 'Project Hours Distribution'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.projectHoursData.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'bar',
          data: this.projectHoursData.map(item => item.hours),
          itemStyle: {
            color: '#409EFF'
          }
        }]
      };
      
      this.chart.setOption(option);
    }
  }
}
</script>

<template>
  <div class="box">
    <div v-if="myuser.userinfo.adminname == 'admin'" style="display: flex;justify-content: center;align-items: center;">
      <h1>管理员你好</h1>
      <el-button type="primary" @click="logoutClick">退出登录</el-button>
    </div>
    <div v-else style="display: flex;justify-content: center;align-items: center;">
      <h1>{{ myuser.userinfo.adminname }}你好</h1>
      <el-button type="primary" @click="logoutClick">退出登录</el-button>
    </div>
    
    <div class="content">
      <div class="left-panel">
        <p>task</p>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="100">
          </el-table-column>
          <el-table-column prop="project" label="Project Name" width="180">
          </el-table-column>
          <el-table-column prop="overtime" label="Overtime" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.overtime ? 'danger' : 'success'">
                {{ scope.row.overtime ? 'Yes' : 'No' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="hours" label="Hours" width="100">
          </el-table-column>
          <el-table-column v-if="myuser.userinfo.adminname == 'admin'" label="Actions" width="120">
            <template #default="scope">
              <el-button
                type="danger"
                size="small"
                @click="deleteRow(scope.$index)">
                Delete
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="right-panel">
        <div ref="chartContainer" class="chart-container"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
}

.content {
  display: flex;
  width: 100%;
  height: 500px;
  gap: 20px;
  padding: 20px;
  background-color: #6ff;
}

.left-panel {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.right-panel {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>